import React, { useEffect, useState } from "react";
import { Form, Input, Select, Button, message, App as AntApp } from "antd";
import { SaveOutlined } from "@ant-design/icons";

const { Option } = Select;

const App = () => {
  const [form] = Form.useForm();
  const [saving, setSaving] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();

  useEffect(() => {
    // 加载已保存的设置
    chrome.storage.sync.get(
      ["apiKey", "targetLang", "displayMode"],
      (result) => {
        if (result) {
          form.setFieldsValue({
            apiKey: result.apiKey || "",
            targetLang: result.targetLang || "zh",
            displayMode: result.displayMode || "replace",
          });
        }
      }
    );
  }, [form]);

  // 保存设置
  const handleSave = async (values) => {
    setSaving(true);
    try {
      await chrome.storage.sync.set({
        apiKey: values.apiKey,
        targetLang: values.targetLang,
        displayMode: values.displayMode,
      });
      messageApi.success("设置已保存");
    } catch (error) {
      messageApi.error("保存设置失败");
      console.error("保存设置错误:", error);
    } finally {
      setSaving(false);
    }
  };

  return (
    <AntApp>
      {contextHolder}
      <div className="options-container">
        <h1 className="options-title">DeepSeek翻译设置</h1>

        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          className="settings-form"
          initialValues={{
            targetLang: "zh",
            displayMode: "replace",
          }}
        >
          <Form.Item
            name="apiKey"
            label="DeepSeek API密钥"
            rules={[{ required: true, message: "请输入API密钥" }]}
          >
            <Input.Password placeholder="输入您的API密钥" autoComplete="off" />
          </Form.Item>

          <Form.Item name="targetLang" label="目标语言">
            <Select placeholder="选择翻译的目标语言">
              <Option value="zh">中文</Option>
              <Option value="en">英文</Option>
              <Option value="ja">日文</Option>
              <Option value="ko">韩文</Option>
              <Option value="fr">法文</Option>
            </Select>
          </Form.Item>

          <Form.Item name="displayMode" label="展示模式">
            <Select placeholder="选择翻译结果的显示方式">
              <Option value="replace">替换原文</Option>
              <Option value="side-by-side">双语对照</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={saving}
              icon={<SaveOutlined />}
            >
              保存设置
            </Button>
          </Form.Item>
        </Form>

        <div className="options-footer">
          <p>使用DeepSeek API进行翻译，请确保您有效的API密钥</p>
          <p>
            <a
              href="https://platform.deepseek.com/"
              target="_blank"
              rel="noreferrer"
            >
              获取DeepSeek API密钥
            </a>
          </p>
        </div>
      </div>
    </AntApp>
  );
};

export default App;
